<template>
	<div class="app-contain">
		<div class="u-plan-wrap uc-plan-title uc-m-top">
			<header class="u-header-title clearfix">
				<a :class="status==1?'current':''" href="javascript:;" @click="changStatus(1)"><span>待完成</span></a>
				<a :class="status==2?'current':''" href="javascript:;" @click="changStatus(2)"><span>已完成</span></a>
				<a :class="status==3?'current':''" href="javascript:;" @click="changStatus(3)"><span>任务逾期</span></a>

			</header>
			<section class="uc-emp-box">
				<ol>

					<li class="ongoing uc-emp-item " v-for='item in taskList' style="height: 170px;">
						<div class="emp-s-b-sec">
							<div class="clearfix e-s-box" style="height: 173px;">
								<div class="mt10 e-s-mod1"></div>
								<div class="e-s-mod2">
									<h3 class="hLh30 e-s-name tac"> <a href="javascript:;" :title="item.name" class=" fsize16 vam txtOf ">{{item.name}}</a> </h3>
									<section class="tac">
										<p class="c-fff fsize12 mt5 remain-day-box" v-show="status==1">剩余 <span class="fsize30">{{item.surplusDays}}</span> 天 </p>
										<p class="c-fff fsize12 mt5 remain-day-box" v-show="status==2"><i class="fsize20">任务完成 </i></p>
										<p class="c-fff fsize12 mt5 remain-day-box" v-show="status==3"><i class="fsize20">任务逾期 </i></p>
									</section>
									<div class="plan-progres-box mt5 hLh20"> 
										<span class="time-bar-wrap"> 
											<span  class="lev-num-wrap">  </span>
										</span>
									</div>
									<div class="p-progres-num"> <span class="c-fff fsize14">已完成 {{item.finishNum}}/{{item.itemNum}}</span> </div>

								</div>
							</div>
						</div>
						<div class="plan-attr-wrap">
							<ul class="clearfix">
								<li><em class="e-time-icon"></em><span>截止时间:{{item.endtime}}</span></li>
							</ul>
							<ul class="clearfix">
								<li><em class="e-grade-icon"></em><span>学分：<tt>{{item.credit}}</tt></span></li>
								<li><em class="e-cert-icon"></em><span>证书：<tt>暂无证书</tt></span></li>
							</ul>

						</div>
						<div class="tac fr mr25">
							<el-button type="primary" size="medium" @click="joinStudy(item.id)">进入学习</el-button>
						</div>

					</li>
				</ol>
				<div class="clear"></div>
				<section class="mt30 mb30 tac u-p-nodata" v-show="status==1&&taskList.length<1">
					<em class="no-data-ico cTipsIco">&nbsp;</em>
					<span class="c-666 fsize14 ml10 vam"> 您 还 没 有  培 训 任 务~ </span>
				</section>
				<section class="mt30 mb30 tac u-p-nodata" v-show="status==2&&taskList.length<1">
					<em class="no-data-ico cTipsIco">&nbsp;</em>
					<span class="c-666 fsize14 ml10 vam"> 您 还 没 有 已 完 成 的 培 训 任 务~ </span>
				</section>
				<section class="mt30 mb30 tac u-p-nodata" v-show="status==3&&taskList.length<1">
					<em class="no-data-ico cTipsIco">&nbsp;</em>
					<span class="c-666 fsize14 ml10 vam"> 您 还 没 有 逾 期 的 培 训 任 务~ </span>
				</section>
			</section>

		</div>
	</div>
</template>

<script>
	import { getTime } from '@/utils/index'
	import { getTaskList } from '@/api/uc'
	export default {
		name: 'plan',
		data() {
			return {
				status: 1,
				taskList: []
			}
		},
		computed: {
			getUserInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created() {
			let data = {
				userId: this.getUserInfo.id,
				status: this.status
			};
			this.getTaskList(data);
		},
		methods: {
			joinStudy(id) {
				this.$router.push({
					path: "planInfo",
					query: {
						id: id
					}
				});

			},
			getTaskList(data) {
				getTaskList(data).then((res) => {

					res.entity.forEach((item) => {
						item.surplusDays = getTime(item.endtime);
					});
					this.taskList = res.entity;
				})
			},
			changStatus(val) {
				this.status = val;
				let data = {
					userId: this.getUserInfo.id,
					status: this.status
				};
				this.getTaskList(data);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/style/uCenter-nxb.scss'
</style>